/** * @description: 预警学生-列表 */
<template>
  <div class="pub-container classes-Msg">
    <div class="title">
      {{ $route.query.type === 'psy' ? '心理异常记录' : $route.query.type === 'behavior' ? '行为失范预警学生' : '旷课学生' }}
    </div>

    <!-- content -->
    <div class="content">
      <div v-if="$route.query.type === 'behavior'" class="content-header">
        <p>
          <span>学生姓名</span>
        </p>
        <p>
          <span>行为失范</span>
          <span>预警次数</span>
        </p>
        <p>
          <span>寝室行为</span>
          <span>异常次数</span>
        </p>
        <p>
          <span>处理次数</span>
        </p>
        <p>
          <span>辅导员</span>
        </p>
      </div>
      <div v-if="$route.query.type === 'psy'" class="content-header">
        <p>
          <span>学生姓名</span>
        </p>
        <p>
          <span>心理异常记录数</span>
        </p>
        <p>
          <span>处理状态</span>
        </p>
        <p>
          <span>辅导员</span>
        </p>
      </div>
      <div v-if="$route.query.type === 'study'" class="content-header">
        <p>
          <span>学生姓名</span>
        </p>
        <p>
          <span>应考勤</span>
        </p>
        <p>
          <span>正常考勤</span>
        </p>
        <p>
          <span>旷课次数</span>
        </p>
        <p>
          <span>旷课率</span>
        </p>
        <p>
          <span>辅导员</span>
        </p>
      </div>
      <van-pull-refresh v-model="refreshing" :disabled="finished" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了..." @load="onLoad">
          <!-- 行为失范 -->
          <template v-if="$route.query.type === 'behavior'">
            <div v-for="(item, index) of warningList" :key="index" :class="[index > 0 ? 'van-hairline--top' : '', 'content-wrapper']">
              <span>{{ item.stuName }}</span>
              <span>{{ item.warningNums || 0 }}</span>
              <span>{{ item.reportNums || 0 }}</span>
              <span>{{ item.handleNums || '--' }}</span>
              <span>{{ item.fdyName }}</span>
            </div>
          </template>

          <!-- 心理预警 -->
          <template v-if="$route.query.type === 'psy'">
            <div v-for="(item, index) of warningList" :key="index" :class="[index > 0 ? 'van-hairline--top' : '', 'content-wrapper']">
              <span>{{ item.stuName }}</span>
              <span>{{ item.warningNums || 0 }}</span>
              <span>{{ item.handleStatus || '--' }}</span>
              <span>{{ item.fdyName }}</span>
            </div></template>

          <!-- 学业预警 -->
          <template v-if="$route.query.type === 'study'">
            <div v-for="(item, index) of warningList" :key="index" :class="[index > 0 ? 'van-hairline--top' : '', 'content-wrapper']">
              <span>{{ item.stuName }}</span>
              <span>{{ item.requiredTimes || 0 }}</span>
              <span>{{ item.normalTimes || 0 }}</span>
              <span>{{ item.absentTimes || '--' }}</span>
              <span>{{ item.proportion }}%</span>
              <span>{{ item.fdyName }}</span>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { warningBehaviorByStu, warningPsychicByStu, warningAcademicByStu } from '@/api/warning'
export default {
  name: 'ClassesListMsg',
  data() {
    return {
      warningList: [],
      loading: true,
      finished: false,
      refreshing: false,
      params: {
        collegeId: '',
        collegeName: '',
        pageNum: 1,
        pageSize: 20
      },
      total: 0
    }
  },
   created() {
    this.params.collegeId = this.$route.query.collegeId
    this.params.collegeName = this.$route.query.tc
     this.getWarningApi()
  },
  methods: {
    // 预警
    async getWarningApi(isRefresh) {
      try {
        let res
        if (this.$route.query.type === 'behavior') {
          res = await warningBehaviorByStu({
            ...this.params
          })
        } else if (this.$route.query.type === 'psy') {
          res = await warningPsychicByStu({
            ...this.params
          })
        } else if (this.$route.query.type === 'study') {
          res = await warningAcademicByStu({
            ...this.params
          })
        }
        const data = res.data.data

        if (isRefresh) {
          this.warningList = [...data.list, ...this.warningList]
          this.refreshing = false
        } else {
          this.warningList = [...this.warningList, ...data.list]
          this.loading = false
        }

        this.total = data.total
        if (this.warningList.length === this.total) {
          this.finished = true
        }
      } catch (e) {
        console.log(e)
      }
    },

    // 上拉加载处理函数
    onLoad() {
      this.params.pageNum++
      this.getWarningApi()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.params.pageNum++
      this.getWarningApi(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  background: $bg-white;
  padding: 23.5px 12px;
  font-size: $fz16;
  color: $color-title;
  margin-top: 15px;
}
.content {
  &-header {
    display: flex;
    padding: 10.5px 0;
    p {
      flex: 1;
      text-align: center;
      span {
        display: block;
        font-size: $fz12;
        color: #97979f;
      }
      span + span {
        margin-top: 5px;
      }
    }
  }
  .content-wrapper {
    display: flex;
    background: $bg-white;
    padding: 13px 0;
    span {
      flex: 1;
      text-align: center;
      font-size: $fz14;
      color: $color-title;
    }
  }
}

.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;

  &-title {
    font-size: $fz16;
    color: $color-title;
    margin-bottom: 25px;
  }
}
</style>
